<template>
  <div class="system-role">
    <div class="system-role-container">
      <el-card shadow="hover" class="system-role-search mb15">
        &nbsp;&nbsp;&nbsp;&nbsp;单位&nbsp;&nbsp;&nbsp;&nbsp;
        <el-select v-model="unit">
          <el-option label="全部" value="全部"></el-option>
        </el-select>
        &nbsp;&nbsp;&nbsp;&nbsp;类别&nbsp;&nbsp;&nbsp;&nbsp;
        <el-select v-model="category">
          <el-option label="无" value="无"></el-option>
        </el-select>
        &nbsp;&nbsp;&nbsp;&nbsp;名称&nbsp;&nbsp;&nbsp;&nbsp;
        <el-input style="width: 120px;" size="small" />
        <el-button size="small" type="primary" class="ml10" style="float: right">查询</el-button>
      </el-card>
      <el-card shadow="hover" class="system-role-table">
        <div class="system-roleTable-title">
          <div style="float: left;margin-bottom:10px">
            <el-button size="mini" type="primary" @click="onAdd">添加</el-button>
          </div>
        </div>
        <el-table :data="tableData.data" size="mini" stripe border>
          <el-table-column prop="code" label="排序号" show-overflow-tooltip></el-table-column>
          <el-table-column prop="category" label="类别" show-overflow-tooltip></el-table-column>
          <el-table-column prop="name" label="名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="unit" label="单位" show-overflow-tooltip></el-table-column>
          <el-table-column prop="staff" label="人员" show-overflow-tooltip></el-table-column>
          <el-table-column prop="email" label="内部邮箱配额" show-overflow-tooltip></el-table-column>
          <el-table-column prop="system" label="系统" show-overflow-tooltip></el-table-column>
          <el-table-column prop="path" label="操作" fixed="right"  width="160">
            <template #default="scope" >
              <i class="el-icon-edit-outline optionIcon system-role-icon" @click="onRowEdit(scope.row)"></i> 
              <i class="el-icon-delete optionIcon system-role-icon" v-if="scope.row.system === '是'"></i>
              <i class="el-icon-warning-outline optionIcon system-role-icon" ></i>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15" :pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="tableData.param.pageNum" background v-model:page-size="tableData.param.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" style="float: right">
        </el-pagination>
      </el-card>
    </div>
    <el-dialog
		  title="添加角色"
			v-model="dialogVisible"
			width="50%"
			:before-close="handleClose"
      center
		>
			<el-form ref="form" :model="addForm" label-width="90px">
        <el-form-item label="编码">
          <el-input v-model="addForm.code" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="addForm.name" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="邮箱配额">
          <el-switch v-model="addForm.email"></el-switch>
          <el-input v-model="addForm.emailValue" v-show="addForm.email"  style="width: 200px ;height: 30px"></el-input>
        </el-form-item>
        <el-form-item label="序号">
          <el-input v-model="addForm.serial"  style="width: 200px"></el-input>（序号越大，表示角色级别越高，用于流程中比较角色大小）
        </el-form-item>
        <el-form-item label="管理本部门">
          <el-switch v-model="addForm.manage" ></el-switch>（能够查看“部门工作”）
        </el-form-item>
        <el-form-item label="系统">
          <el-switch v-model="addForm.system"></el-switch>(系统角色对于集团中的子单位管理员可见)
        </el-form-item>
        <el-form-item label="类别">
          <el-switch v-model="addForm.category"></el-switch>
        </el-form-item>
        <el-form-item label="单位">
          <el-select v-model="addForm.unit">
            <el-option label="南京云网" value="南京云网"></el-option>
            <el-option label="事业部" value="事业部"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onAddSubmit" style="float:right">确定</el-button>
          <el-button @click="dialogVisible = false" style="float:right;margin-right: 10px">返回</el-button>
        </el-form-item>
      </el-form>
		</el-dialog>
  </div>
</template>

<script >
import { toRefs, reactive, onMounted } from 'vue';
export default {
  name: 'systemRole',
  setup() {
    const state = reactive({
      tableData: {
        data: [],
        total: 0,
        loading: false,
        param: {
          pageNum: 1,
          pageSize: 10,
        },
      },
      addForm:{
        name:'',
        code:'',
        email:false,
        unit:'南京云网',
        category:false,
        system:false,
        manage:false,
        serial:'',
        emailValue:'',
      },
      unit: '全部',
      category: '无',
      dialogVisible: false,
    });

    // 初始化表格数据
    const initTableData = () => {
      const data = [];
      for (let i = 0; i < 10; i++) {
        data.push({
          code: `00${i + 1}`,
          name: '销售总监',
          email: `${Math.floor(Math.random() * 100)}MB`,
          system: i=== 0 ? '是' : '否' ,
          status: true,
          unit: '南京云网',
          work: '',
          category:'',
          staff:'孙悦',
        });
      }
      state.tableData.data = data;
      state.tableData.total = state.tableData.data.length;
    };
    // 分页改变
    const onHandleSizeChange = (val) => {
      state.tableData.param.pageSize = val;
    };
    // 分页改变
    const onHandleCurrentChange = (val) => {
      state.tableData.param.pageNum = val;
    };


    // 页面加载时
    onMounted(() => {
      initTableData();
    });
    return {
      onHandleSizeChange,
      onHandleCurrentChange,
      ...toRefs(state),
    };
  },
  methods: {
    onAdd(){
      this.dialogVisible = true
    },
    onAddSubmit(){
      let obj = {
        code: this.addForm.code,
        name: this.addForm.name,
        email: this.addForm.email ?  this.addForm.emailValue :  this.addForm.email,
        system: this.addForm.system,
        unit: this.addForm.unit,
        category: this.addForm.category,
      }
      this.tableData.data.push(obj)
      this.dialogVisible = false
    },
    onRowEdit(row){
      this.$router.push({
        path: '/system/editRole',
				query: {
          name: row.name,
          system: row.system,
          unit: row.unit,
          category: row.category,
        },
      })
    },
    onEditSubmit(){

    }
  },
  mounted() {
  }
};
</script>

<style scoped lang="scss">
.system-role {
	.system-role-search {
		min-height: 50px;
		padding: 0;
	}
	.system-role-container {
		.system-role-icon{
      font-size: 20px;
      cursor: pointer;
      padding-left: 20px;
      &:hover{
        color: blue;
      }
    }
	}
  
}
</style>
